<template>
  <el-row class="tac">
    <el-col :span="5">
      <a-tree
        default-expand-all
        @select="onSelect"
        show-icon
        @rightClick="onRightClick"
        :tree-data="menudata"
        :default-selected-keys="['0-0-0']"
      >
        <span slot="icon" slot-scope="{ icon }">
          <nx-svg-icon
            :class-name="icon + '-icon'"
            :icon-class="icon"
            slot="avatar"
          />
        </span> </a-tree
    ></el-col>
    <el-col :span="19">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <img
            src="https://zht-admin-test.huiqulx.com/subapp/business_analysis-admin/2b2d5d900b3f14df583cfbf5b4f48b7d.png"
            alt="push"
            style="width: 20px; height: 20px; margin-top: -8px;"
          />
          <span style="font-size: 18px; padding-left: 10px; font-weight: bold;"
            >按钮权限</span
          >
        </div>

        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="按钮编码" prop="actionCode">
          </el-table-column>
          <el-table-column label="按钮名称" prop="actionName">
          </el-table-column>
          <el-table-column align="right">
            <template slot-scope="scope">
              <a
                class="margin-a"
                href="javascript:;"
                style="margin-right: 5px;"
                @click="handleEdit(scope.row)"
                >修改</a
              >
              <a
                class="margin-a"
                href="javascript:;"
                style="margin-right: 5px;"
                @click="handleDelete(scope.row)"
                >删除</a
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
    <v-contextmenu ref="rootmenu">
      <v-contextmenu-item @click="addmenu" v-has="add">添加</v-contextmenu-item>
    </v-contextmenu>
    <v-contextmenu ref="folderMenu">
      <v-contextmenu-item @click="addchildMenu">添加</v-contextmenu-item>
      <v-contextmenu-item @click="editMenu">修改</v-contextmenu-item>
      <v-contextmenu-item @click="delMenu">删除</v-contextmenu-item>
    </v-contextmenu>
    <v-contextmenu ref="Menu">
      <v-contextmenu-item @click="addButton">添加按钮</v-contextmenu-item>
      <v-contextmenu-item @click="editMenu">修改</v-contextmenu-item>
      <v-contextmenu-item @click="delMenu">删除</v-contextmenu-item>
    </v-contextmenu>
    <zhlDialog
      title="菜单编辑"
      ref="menuinfodialog"
      width="460px"
      class="my-dialog"
    >
      <menuinfo
        :menudata="menuparaminfo"
        :isTypeNameedit="isTypeNameedit"
        @SaveMenuinfo="SaveMenuinfo"
      ></menuinfo>
    </zhlDialog>
    <zhlDialog
      title="菜单按钮权限"
      ref="menuButtondialog"
      width="460px"
      class="my-dialog"
    >
      <a-form ref="elForm" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
        <a-form-item label="按钮编号" required>
          <a-input
            v-model="menubutton.actionCode"
            placeholder="请输入按钮编号"
            :style="{ width: '100%' }"
          ></a-input>
        </a-form-item>
        <a-form-item label="按钮名称" required>
          <a-input
            v-model="menubutton.actionName"
            placeholder="请输入按钮名称"
            :style="{ width: '100%' }"
          ></a-input>
        </a-form-item>
        <el-row class="filterbottom">
          <div class="operation" style="heigth: 60px">
            <el-button @click="$res.menuButtondialog.visible = false"
              >关闭</el-button
            >
            <el-button type="primary" @click="saveMenuButton()">确定</el-button>
          </div>
        </el-row>
      </a-form>
    </zhlDialog>
  </el-row>
</template>
<script>
import { GetAllMenu, delMenu } from '@/api/tappmenu'
import menuinfo from './menuinfo'
import nxSvgIcon from '@/components/nx-svg-icon/index'
import {
  getActionByMenuId,
  delAction,
  addAction,
  eidtAction
} from '@/api/menuAction'
export default {
  data() {
    return {
      menudata: [],
      selectdata: {},
      menuparaminfo: {},
      isTypeNameedit: false,
      search: '',
      tableData: [],
      checkednode: {},
      selectnode: {},
      parentnode: {},
      menubutton: {
        actionCode: undefined,
        actionName: undefined,
        menuId: undefined,
        id: undefined
      }
    }
  },
  components: { menuinfo, nxSvgIcon },
  methods: {
    loadMenuButton() {
      if (this.checkednode.typeid === 4) {
        getActionByMenuId(this.checkednode.fid).then(res => {
          this.tableData = res.data
        })
      } else {
        this.tableData = []
      }
    },
    onSelect(selectedKeys, info) {
      if (info.node.dataRef.code !== this.checkednode.code) {
        this.checkednode = info.node.dataRef
        this.loadMenuButton()
      }
    },
    onRightClick({ event, node }) {
      const answer = node._props.dataRef.anwer
      if (answer) {
        this.$refs.contextmenu.hide()
        this.answer = answer
        return
      }
      this.parentnode = null
      if (node.$parent.dataRef !== null && node.$parent.dataRef !== undefined) {
        this.parentnode = node.$parent.dataRef
      }
      this.selectnode = node.dataRef
      console.log(node.dataRef)
      const postition = {
        top: event.y,
        left: event.x
      }
      this.$refs.rootmenu.hide()
      this.$refs.folderMenu.hide()
      this.$refs.Menu.hide()
      switch (this.selectnode.typeid) {
        case 0:
          this.$refs.rootmenu.show(postition)
          break
        case 1:
          this.$refs.folderMenu.show(postition)
          break
        case 4:
          this.$refs.Menu.show(postition)
          break
        default:
          break
      }
    },
    loadAllMenu() {
      GetAllMenu().then(res => {
        this.menudata = res.data
      })
    },
    addButton() {
      this.menubutton = {
        actionCode: undefined,
        actionName: undefined,
        menuId: this.checkednode.fid,
        id: undefined
      }
      this.$refs.menuButtondialog.visible = true
    },
    addmenu() {
      this.selectdata = this.menudata
      this.menuparaminfo.FType = 1
      this.menuparaminfo.FParentName = '根节点'
      this.menuparaminfo.FParentID = 5
      this.menuparaminfo.fid = null
      this.isTypeNameedit = false
      this.$refs.menuinfodialog.visible = true
    },
    addchildMenu() {
      this.selectdata = this.selectnode
      this.menuparaminfo.FType = 4
      this.menuparaminfo.FParentName = this.selectnode.name
      this.menuparaminfo.FParentID = this.selectnode.fid
      this.menuparaminfo.fid = null
      this.isTypeNameedit = true
      this.$refs.menuinfodialog.visible = true
    },
    editMenu() {
      this.selectdata = this.selectnode
      this.menuparaminfo.fid = this.selectnode.fid
      this.menuparaminfo.FParentName = this.parentnode.name
      this.isTypeNameedit = true
      this.$refs.menuinfodialog.visible = true
    },
    delMenu() {
      if (this.selectnode.children.length > 0) {
        this.$message.error('请先删除子项！')
        return
      }
      delMenu(this.selectnode.fid).then(res => {
        if (res.code === 0) {
          this.$delete(
            this.parentnode.children,
            this.parentnode.children.indexOf(this.selectnode)
          )
          this.$message.success('删除成功！')
        }
      })
    },
    SaveMenuinfo(data) {
      if (
        this.menuparaminfo.fid !== undefined &&
        this.menuparaminfo.fid !== null
      ) {
        this.selectdata.name = data.FMenuName
        this.selectdata.index = data.FOrderIndex
        this.selectdata.code = data.FMenuUrl
        this.selectdata.icon = data.FIcon
      } else {
        const newmenudata = {}
        newmenudata.fid = data.fid
        newmenudata.procbid = data.FParentID
        newmenudata.typeid = data.FTYPE
        newmenudata.name = data.FMenuName
        newmenudata.index = data.FOrderIndex
        newmenudata.code = data.FMenuUrl
        newmenudata.icon = data.FIcon
        newmenudata.children = []
        this.selectdata.children.push(newmenudata)
      }
      this.$refs.menuinfodialog.visible = false
    },
    saveMenuButton() {
      this.$refs.menuButtondialog.visible = false
      if (
        this.menubutton.actionCode === '' ||
        this.menubutton.actionCode === undefined
      ) {
        this.$message.error('按钮编码不能为空！')
        return
      }
      if (
        this.menubutton.actionName === '' ||
        this.menubutton.actionName === undefined
      ) {
        this.$message.error('按钮名称不能为空！')
        return
      }
      if (this.menubutton.id === undefined) {
        addAction(this.menubutton).then(res => {
          this.loadMenuButton()
          console.log(res)
          this.$message.success('保存成功！')
        })
      } else {
        eidtAction(this.menubutton).then(res => {
          this.loadMenuButton()
          console.log(res)
          this.$message.success('保存成功！')
        })
      }
    },
    handleDelete(rowdata) {
      delAction(rowdata.fid).then(res => {
        console.log(res)
        this.loadMenuButton()
        this.$message.success('删除成功！')
      })
    },
    handleEdit(rowdata) {
      this.menubutton = {
        actionCode: rowdata.actionCode,
        actionName: rowdata.actionName,
        menuId: rowdata.menuId,
        id: rowdata.fid
      }
      this.$refs.menuButtondialog.visible = true
    }
  },
  mounted() {
    this.loadAllMenu()
  }
}
</script>
